<template>
  <div id="app">
    <el-form ref="searchForm" :model="searchForm">
      <el-row :gutter="20">
        <ep-input
          @input-message="onChangeSearchForm"
          colspan="3"
          :value="searchForm.title"
          placeholder="搜索公告名称"
          :isIcon="true"
          size="mini"
          name="title"
        ></ep-input>
        <el-col :span="6">
          <el-form-item>
            <el-date-picker
              style="width:100%;"
              v-model="datePicker"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
              size="mini"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <ep-select
          @input-message="onChangeSearchForm"
          colspan="3"
          :value="searchForm.isPublic"
          placeholder="请选择可见类型"
          :isIcon="true"
          size="mini"
          name="isPublic"
        ></ep-select>
      

        <ep-select
          @select-message="onChangeSearchForm"
          colspan="4"
          :value="searchForm.status"
          placeholder="请选择状态"
          :isIcon="true"
          size="mini"
          name="status"
        ></ep-select>
     
        <el-col :span="4" :offset="4">
          <el-form-item>
            <el-button @click="onSearch" size="mini">查询</el-button>
            <el-button type="primary" size="mini" @click="addDialog">新增</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column align="center" prop="title" label="公告名称"></el-table-column>
      <el-table-column align="center" prop="isPublic" label="可见类型"></el-table-column>
      <el-table-column align="center" prop="createBegin" label="创建时间"></el-table-column>
      <el-table-column align="center" prop="createUserId" label="创建人员"></el-table-column>
      <el-table-column align="center" prop="status" label="状态"></el-table-column>
     
      <!-- <el-table-column align="center" label="有效标志">
        <template slot-scope="scope">
          <span>{{scope.row.effectiveSign | effectiveSign}}</span>
        </template>
      </el-table-column>-->

      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button
            v-show="scope.row.maintainSign==0?false:true"
            @click="editClick(scope.row)"
            type="text"
            size="small"
          >查看</el-button>
          <el-button
            v-show="scope.row.maintainSign==0?false:true"
            @click="editClick(scope.row)"
            type="text"
            size="small"
          >编辑</el-button>
          <!-- <el-button
            v-show="scope.row.maintainSign==0?false:true"
            @click="editClick(scope.row)"
            type="text"
            size="small"
          >删除</el-button> -->
          <ep-delete
            v-show="scope.row.maintainSign==0?false:true"
            :id="scope.row.id"
            parmeId="id"
            url="/sys/code/deleteCode"
            :init="true"
            @init="deleteInit"
          >
            <el-button type="text" size="small">删除</el-button>
          </ep-delete>
        </template>
      </el-table-column>
    </el-table>
    <ep-page :total="total" @page="pageInit"></ep-page>
  </div>
</template>

<script>
/**
  *常用字段说明
    页面链接：home/Notification
    id 通知公告id
    title  通知公告名称
    isPublic  可见类型   1显示给所有人  0显示给部分人
    createBegin 创建时间  
    createUserId  创建者id
    status 状态  0未发表1已发表2已删除 
    pageNum 页
    pageSize  每页显示
    publishTime 发布时间
    

 */
let DATE = new Date();
export default {
  data() {
    return {
      dateValue: "",
      total: "",
      daterangeFrom: {
        daterangeValue: ""
      },
      datePicker: [],
      tableData: [],
      diaLogrules: {
        codeType: this.$rules("请输入代码类别"),
        codeValue: this.$rules("请输入代码值"),
        codeName: this.$rules("请输入代码名称"),
        effectiveSign: this.$rules("请选择有效标志"),
        maintainSign: this.$rules("请选择维护状态")
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      searchForm: {
        title: "",
        isPublic: "",
        status: "",
        startCreateTime: "",
        endCreateTime: ""
      },
      page: 1,
      size: 10,
      id: ""
    };
  },
  created() {
    this.init(this.page, this.size);
    console.log(this.datePicker.length);
  },
  methods: {
    init(page, size) {
      console.log(page, size);

      this.$post("/sys/code/operateLog/queryTable", {
        page: page,
        size: size,
        ...this.searchForm
      }).then(data => {
        this.tableData = data.data.pageList.result;
        this.total = data.data.count;
      });
    },
    deleteInit() {
      this.init(this.page, this.size);
    },
    editClick(row) {
      this.id = row.id;
      
    },
    pageInit(page, size) {
      this.page = page;
      this.size = size;
      this.init(page, size);
    },
    
    onChangeSearchForm(data, type) {
      console.log(data);
      console.log(this.searchForm);

      this.searchForm[type] = data;
    },
    addDialog() {
      this.$router.push("/home/addnotification");
    },
    
    onSearch() {
      console.log(this.searchForm.datePicker);

      this.init(this.page, this.size);
    }
  },
  watch: {
    datePicker: {
      deep: true,
      immediate: true,
      handler(val) {
        if (val.length > 0) {
          this.searchForm.startCreateTime = val[0];
          this.searchForm.endCreateTime = val[1];
        }
      }
    }
  }
};
</script>

<style scoped lang="css">

.page {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.black {
  display:inline-block;
  border-width: 0px;
  width: 42px;
  height: 30px;
  background: inherit;
  background-color: rgba(244, 148, 71, 1);
  border: none;
  border-radius: 0px;
  box-shadow: none;
  font-weight: 400;
  font-style: normal;
  color: #ffffff;
}
</style>
